<template>
	<div id="login">
		<!-- <h1>Hello,This is Login</h1> -->
    <div class="div-box">
      <div class="login-logo"><img src="../../assets/images/site_logo.png" alt=""></div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="用户名：" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="userPwd">
          <el-input type="password" v-model="form.userPwd" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <el-button class="login-button" @click="login('form')" sizi="small" type="primary">登录</el-button>
    </div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					userName: '',
					userPwd: ''
				},
				rules: {
					userName: [{
						required: true,
						message: "请输入用户名",
						trigger: 'blur'
					}],
					userPwd: [{
						required: true,
						message: "请输入密码",
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			login(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						console.log(123);
						this.http.post('/api/security/login', {
								account: this.form.userName,
								password: this.form.userPwd
							})
							.then((response) => {
								console.log(response);
								if (response.data.code === 200) {
									let data = response.data;
									localStorage.setItem('token',data.data.token);
									this.http.post('/api/security/info', {})
										.then((res) => {
											let data=res.data;
											if (data.code === 200) {
												localStorage.setItem('userInfo', JSON.stringify(data.data));
											}
										})
									this.$router.replace('/');
                }
                else{
                  this.$message.error(response.data.msg);
                }
							})
							.catch((error) => {
								console.log(error);
							})

					} else {
						this.$notify({
							title: '警告',
							message: '请输入正确的用户名和密码！',
							type: 'warning'
						});
						return false;
					}
				})
			}

			/* // 设置cookie
			setCookie(c_name, c_pwd, exdays) {
				var exdate = new Date(); //获取时间
				exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
				//字符串拼接cookie
				window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
				window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
			},
			//读取cookie
			getCookie: function() {
				if (document.cookie.length > 0) {
					var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
					for (var i = 0; i < arr.length; i++) {
						var arr2 = arr[i].split('='); //再次切割
						//判断查找相对应的值
						if (arr2[0] == 'userName') {
							this.ruleForm.userName = arr2[1]; //保存到保存数据的地方
						} else if (arr2[0] == 'userPwd') {
							this.ruleForm.password = arr2[1];
						}
					}
				}
			}, */
		}
	}
</script>
<style lang="scss">
	#login {
    height: 100%;
    background-color: #ff876a;
    background-image: url("../../assets/images/bg_image.png");
    background-repeat: no-repeat;
    background-position: center 110px;
    padding-top: 150px;
    .div-box{
      width: 30%;
      background: #FFF;
      padding: 60px 50px;
      margin: 0 auto;
      .login-button{
        width: 100%;
        background-color: #E8340C;
        border-color: #E8340C;
      }
      .login-logo{
        padding-bottom: 50px;
        img{
          width: 100%;
        }
      }
    }
	}
</style>
